<template>
  <a-modal
    v-model:visible="showList"
    width="888px"
    title="Pending Clients"
    wrap-class-name="primary-modal"
    :footer="null"
    :destroyOnClose="true"
    @cancel="showList = false"
  >
    <a-spin :spinning="loading">
      <div class="table">
        <a-row>
          <a-col :span="7" class="cell field">Client Name</a-col>
          <a-col :span="6" class="cell field">Abbreviation</a-col>
          <a-col :span="7" class="cell field">URL</a-col>
          <a-col :span="4" class="cell field">Status</a-col>
        </a-row>
        <a-row v-for="(record, index) in records" :key="index">
          <a-col :span="7" class="cell">
            <a :href="router.resolve({ name: 'Client Detail', params: { id: record.id } }).href" :target="record.id">
              {{ record.fullName }}
            </a>
          </a-col>
          <a-col :span="6" class="cell">{{ record.shortName }}</a-col>
          <a-col :span="7" class="cell">{{ record.url }}</a-col>
          <a-col :span="4" class="cell">
            <a-tag v-if="record.applyStatus === 10" color="#bae1ff" style="color: #5b7895; font-weight: bold">
              Pending
            </a-tag>
            <a-tag v-if="record.applyStatus === 30" color="#ffe5d9" style="color: #cb6e46; font-weight: bold">
              Rejected
            </a-tag>
          </a-col>
        </a-row>
        <e-empty v-if="records.length === 0" centered />
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import EEmpty from '@/components/EEmpty.vue'
const props = defineProps({
  display: {
    type: Boolean,
    default: true
  },
  getPendingClients: {
    type: Function
  }
})
const router = useRouter()
const loading = ref(false)
const emits = defineEmits(['update:display'])
const showList = computed({
  get: () => props.display,
  set: val => emits('update:display', val)
})
const records = ref([])
const getData = () => {
  loading.value = true
  props
    .getPendingClients()
    .then(({ data }) => {
      records.value = data
    })
    .finally(() => {
      loading.value = false
    })
}
watch(
  () => showList.value,
  value => {
    if (value) {
      getData()
    }
  }
)
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_table';
@border: 1px solid @lighter-gray;
.table {
  border: @border;
  .cell {
    padding: 10px 14px;
    border-bottom: @border;
    &:last-child {
      border-right: none;
    }
    &.field {
      background-color: @milk;
      color: @text-gray;
    }
  }
  .ant-row:last-child {
    .cell {
      border-bottom: none;
    }
  }
  .ant-tag {
    background-color: @phase-default;
    border: none;
    padding: 1px 12px;
    font-size: 14px;
    .e-icon {
      color: @primary-color !important;
      cursor: pointer;
    }
  }
}
</style>
